<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
  <div class="demoTable" style="margin-top: 20px;margin-bottom: 20px">
      <label>用户名</label>
      <div class="layui-inline" style="margin-right: 20px">
          <input class="layui-input" name="queryByUserName" id="queryByUserName" autocomplete="off" placeholder="请输入用户名">
      </div>
      <label>电话号</label>
      <div class="layui-inline" style="margin-right: 20px">
          <input class="layui-input" name="queryByPhone" id="queryByPhone" autocomplete="off" placeholder="请输入电话号码">
      </div>
      <button class="layui-btn" id="queryButton">查询</button>
      <button class="layui-btn" data-type="reload" id="resetButton">重置</button>
      <button class="layui-btn" id="addButton">新增</button>
  </div>

<!--  这是表格-->
<table class="layui-hide" id="LAY_table_user" lay-filter="LAY_table_user"></table>

<!--  点击新增弹出的页面-->
<!--  class="show-display-none"-->
      <div hidden class="layui-form-pane" id="addModel" style="text-align:center">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>用户新增</legend>
        </fieldset>

          <form class="layui-form" action="">

              <div class="layui-form-item">
                  <div class="layui-inline">
                  <label class="layui-form-label">账号</label>
                  <div class="layui-input-inline">
                      <input type="text" id="username" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入账号" autocomplete="off" class="layui-input">
                  </div>
                  </div>
              </div>

              <div class="layui-form-item">
                  <div class="layui-inline">
                  <label class="layui-form-label">密码</label>
                  <div class="layui-input-block">
                      <input type="password" id="password" name="password" lay-verify="pass" placeholder="请填写6到12位密码" autocomplete="off" class="layui-input">
                  </div>
<!--                  <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>-->
                  </div>
              </div>

              <div class="layui-form-item">
                  <div class="layui-inline">
                      <label class="layui-form-label">真实姓名</label>
                      <div class="layui-input-inline">
                          <input type="text" id="realName" name="realName" lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
                      </div>
                  </div>
              </div>

              <div class="layui-form-item">
                  <div class="layui-inline">
                      <label class="layui-form-label">验证手机</label>
                      <div class="layui-input-inline">
                          <input type="tel" id="phone" name="phone" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                      </div>
                  </div>
              </div>

              <div class="layui-form-item">
                  <div class="layui-input-block">
                      <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitForAdd">立即提交</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
              </div>
          </form>

  </div>


  <!--  点击修改弹出的页面-->
  <!--  class="show-display-none"-->
  <div hidden class="layui-form-pane" id="editModel" style="text-align:center">
      <fieldset class="layui-elem-field layui-field-title">
          <legend>用户修改</legend>
      </fieldset>

      <form class="layui-form" action="">

          <div class="layui-form-item">
              <div class="layui-inline">
                  <label class="layui-form-label">账号</label>
                  <div class="layui-input-inline">
                      <input type="text" id="userNameForEdit" name="userNameForEdit"  placeholder="请输入账号" autocomplete="off" class="layui-input" readonly="true">
                      <input type="hidden" id="userIdForEdit" name="userIdForEdit" class="layui-input">
                  </div>
              </div>
          </div>

          <div class="layui-form-item">
              <div class="layui-inline">
                  <label class="layui-form-label">真实姓名</label>
                  <div class="layui-input-inline">
                      <input type="text"id="realNameForEdit" name="realNameForEdit" lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
                  </div>
              </div>
          </div>

          <div class="layui-form-item">
              <div class="layui-inline">
                  <label class="layui-form-label">验证手机</label>
                  <div class="layui-input-inline">
                      <input type="tel" id="phoneForEdit" name="phoneForEdit" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                  </div>
              </div>
          </div>

          <div class="layui-form-item">
              <div class="layui-input-block">
                  <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitForEdit">确认修改</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
          </div>
      </form>

  </div>



<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="../js/jquery.min.js" charset="utf-8"></script>
<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
 
<script>
layui.use(['table','form','layer','laydate','upload'], function(){
  var table = layui.table,
      form = layui.form,
      layer = layui.layer,
      laydate = layui.laydate,
      uplode = layui.upload;
  
  table.render({
    elem: '#LAY_table_user'
    ,url:'http://localhost:8081/user/api/pageList'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
          ,id: 'testReload'
      ,icon: 'layui-icon-tips'
    }]
    ,title: '用户数据表'
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
      ,{field:'username', title:'用户名', width:100, edit: 'text'}
      ,{field:'realName', title:'姓名', width:80, edit: 'text', sort: true}
      ,{field:'phone', title:'电话', width:130, edit: 'text'}
      ,{field:'createTime', title:'创建时间'}
      ,{field:'modifyTime', title:'修改时间', sort: true}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
    ,page: true
  });

  //查询事件
  $('#queryButton').click(function () {
      table.reload('LAY_table_user',{
          page:{
              curr:1
          },
          where:{
              userName: $('#queryByUserName').val(),
              phone: $('#queryByPhone').val()
          }
      });
  })

  //  重置事件
  $('#resetButton').click(function () {
      $('#queryByUserName').val('');
      $('#queryByPhone').val('')
  })

    //新增事件
    $('#addButton').click(function () {
        addPanel()
    })


  //头工具栏事件
  // table.on('toolbar(LAY_table_user)', function(obj){
  //   var checkStatus = table.checkStatus(obj.config.id);
  //   switch(obj.event){
  //     case 'getCheckData':
  //       var data = checkStatus.data;
  //       layer.alert(JSON.stringify(data));
  //     break;
  //     case 'getCheckLength':
  //       var data = checkStatus.data;
  //       layer.msg('选中了：'+ data.length + ' 个');
  //     break;
  //     case 'isAll':
  //       layer.msg(checkStatus.isAll ? '全选': '未全选');
  //     break;
  //
  //     //自定义头工具栏右侧图标 - 提示
  //     case 'LAYTABLE_TIPS':
  //       layer.alert('这是工具栏右侧自定义的一个图标按钮');
  //     break;
  //   };
  // });


  //修改和删除事件
    table.on('tool(LAY_table_user)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'del'){
            layer.confirm('真的删除该记录么？', function(index){
                deluser(data,index,obj);
            } );
        }
        if(layEvent === 'edit'){
            layer.confirm('真的修改该记录么？', function(index){
                editPanel(data,index,obj);
            } );
        }
    });

    function addPanel() {
        $('#username').val('');
        $('#password').val('');
        $('#realName').val('');
        $('#phone').val('');
        layer.open({
            type: 1,
            title: '用户新增',
            area: ["30%","60%"],  //宽 高
            content: $('#addModel') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    }

    function editPanel(data,index,obj) {
        //先把值返现给对应的文本框，然后用组件把弹窗给整出来
        $('#userIdForEdit').val(data.id);
        $('#userNameForEdit').val(data.username);
        $('#realNameForEdit').val(data.realName);
        $('#phoneForEdit').attr("value",data.phone);


        layer.open({
            type: 1,
            title: '用户修改',
            area: ["30%","60%"],  //宽 高
            content: $('#editModel') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    }

    //提交新增表单
    form.on('submit(submitForAdd)', function(data){
        layer.alert(JSON.stringify(data.field), {
            title: '最终的提交信息'
        })
        $.ajax({
            url: "http://localhost:8081/user/api/register",    //这个是后台的路由地址
            type: "POST",
            data : {
                'userName' : data.field.username,
                'password' : data.field.password,
                'realName' : data.field.realName,
                'phone' : data.field.phone
            },
            dataType: "json",     //----可能必须是json
            success: function (data) {
                //同步更新表格和缓存对应的值
                layer.msg("新增成功", {icon: 6});
            },
            error : function(e){
                layer.msg("新增失败", {icon: 5});
            }
        });
    });

    //提交修改表单
    form.on('submit(submitForEdit)', function(data){
        //console.log(data)
        // layer.alert(JSON.stringify(data.field), {
        //     title: '最终的提交信息'
        // })
        var data1 ={
                'id': data.field.userIdForEdit,
                'realName' : data.field.realNameForEdit,
                'phone' : data.field.phoneForEdit
            }
        $.ajax({
            url: "http://localhost:8081/user/api/update",    //这个是后台的路由地址
            type: "POST",
            data : data1,
            dataType: "json",     //----可能必须是json
            success: function (data) {
                //同步更新表格和缓存对应的值
                layer.msg("修改成功", {icon: 6});
            },
            error : function(e){
                layer.msg("修改失败", {icon: 5});
            }
        });
    });

    //删除按钮调用的方法
    function deluser(data,index,obj) {
        $.ajax({
            url: "http://localhost:8081/user/api/delete",    //这个是后台的路由地址
            type: "POST",
            data: {"id": data.id},//传给后台的值
            dataType: "json",     //----可能必须是json
            success: function (data) {
                    //同步更新表格和缓存对应的值
                     obj.del();
                    layer.msg("删除成功", {icon: 6});
            },
            error : function(e){
                layer.msg("删除失败", {icon: 5});
            }
        });
    }

});
</script>

</body>
</html>